<template>
  <zm-dialog
    title="配置卡面"
    :visible.sync="value"
    :before-close="dialogClose"
    :close-on-click-modal="false"
    append-to-body
    size="large"
  >
    <zm-radio-group v-model="cardSelcet">
      <el-radio label="0">选择卡面</el-radio>
      <el-radio label="1">上传卡面</el-radio>
    </zm-radio-group>
    <div v-if="cardSelcet === '0'">
      <div class="content-image">
        <div
          class="imge-mr"
          v-for="(item, index) of cardSurfaceList"
          :key="index"
          @click="onCardSelcet(index)"
        >
          <el-image
            style="width: 250px; height: 110px; border-radius: 12px;"
            :src="item.image"
            fit="cover"
          ></el-image>
          <div :class="[index === currentCardIndex ? 'btn-sured' : 'btn-sure']">
            <i class="el-icon-check check"></i>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="padding: 16px;">
      <zm-image-upload
        v-model="currentUplodImage"
        :limit="1"
      ></zm-image-upload>
    </div>
    <div slot="footer" class="tr">
      <el-button size="small" @click="dialogClose">取消</el-button>
      <el-button size="small" type="primary" @click="submit">确认</el-button>
    </div>
  </zm-dialog>
</template>
<script>
import ZmImageUpload from '@/components/ZmUpload/components/ImageUpload.vue'
import dialogMixin from '@/mixins/dialogMixin'
import cardSurface from '@/api/src/cardSurface'
export default {
  name: 'SelectProduct',
  components: { ZmImageUpload },
  mixins: [dialogMixin],
  props: {
    // 是否已选择的产品
    cardSurfaceImage: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cardSurfaceList: [],
      cardSelcet: '0', // 0 选择卡面 1 上传卡面
      currentCardIndex: null,
      currentUplodImage: '',
      loading: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.cardSurfaceList = await cardSurface.getList()
      if (this.cardSurfaceImage) {
        this.cardSurfaceList.forEach((item, index) => {
          if (item.iamge === this.cardSurfaceImage) {
            this.currentCardIndex = index
          }
        })
      }
    },
    onCardSelcet(index) {
      this.currentCardIndex = index
    },
    submit() {
      if (this.cardSelcet === '0') {
        const temp = this.cardSurfaceList[this.currentCardIndex]
        this.$emit('handle-after', temp.image)
      } else {
        if (this.currentUplodImage) {
          this.$emit('handle-after', this.currentUplodImage)
        } else {
          return this.$message.warning('请上传卡面')
        }
      }

      this.dialogClose()
    }
  }
}
</script>
<style scoped lang="scss">
.content-image {
  display: flex;
  margin-left: 50px;
  flex-wrap: wrap;
  min-height: 300px;
  overflow: auto;
  cursor: pointer;
  .imge-mr {
    position: relative;
    margin: 12px;
    border-radius: 6px;
    overflow: hidden;
    .btn-sure {
      display: none;
    }
    .btn-sured {
      display: block;
      position: absolute;
      right: -0;
      top: -0;
      height: 60px;
      width: 60px;
      // border-color:#08eb39  transparent   transparent  transparent  ;
      // background: #08eb39;
      color: #fff;
      cursor: pointer;

      background: conic-gradient(
        from 90deg at 50% 0,
        rgb(12, 234, 16) 0,
        rgb(100, 230, 8) 45deg,
        transparent 45.1deg
      );
      .check {
        margin-left: 45px;
      }
    }
  }
}
/deep/.el-upload-list__item.is-success{
  width: 400px;
  height: 200px;
}
</style>
